<template>
  <div class="popover-demo">
    <MPopover trigger="hover">
      <MButton>悬浮触发</MButton>
      <template #popover >
        <span :style="{color:'hotpink'}">啊啊啊</span>
      </template>
    </MPopover>
    <MPopover trigger="click">
      <MButton>点击触发</MButton>
      <template #popover >
        <span :style="{color:'hotpink'}">再次点击关闭</span>
      </template>
    </MPopover>
    <MPopover trigger="focus">
      <MButton>聚焦触发</MButton>
      <template #popover >
        <span :style="{color:'hotpink'}">失焦关闭</span>
      </template>
    </MPopover>
    <MPopover trigger="manual" :show="showTooltip">
      <MButton>自定义控制</MButton>
      <template #popover >
        <span :style="{color:'hotpink'}">从外面传一个show进来</span>
      </template>
    </MPopover>
  </div>
</template>

<script lang="ts" >

import { defineComponent , onMounted ,ref} from "vue";
export default  defineComponent({
  components:{

  },
  setup(){
    const showTooltip = ref(false)

    onMounted(()=>{
      setInterval(()=>{
        showTooltip.value = !showTooltip.value
      },3000)
    })

    return {
        showTooltip

    }
  }
})

</script>

<style lang="scss">
.popover-demo {
  padding:10px;
  .m-popover
  {
    margin-right: 8px;
    margin-bottom: 12px;
  }
}
</style>

